<template>
  <a-modal
    :visible="visible"
    :title="$t('提现记录详情')"
    :mask-closable="true"
    :footer="false"
    width="750px"
    @cancel="close"
    @update:visible="(val) => emit('update:visible', val)"
  >
    <div class="withdraw-detail">
      <div class="detail-header">
        <div class="status-tag">
          <a-tag
            :color="getStatusColor(localRecord?.withdrawStatus)"
            size="medium"
          >
            {{ localRecord?.withdrawStatusName }}
          </a-tag>
        </div>
        <div class="withdraw-no">
          {{ $t('提现编号') }}: {{ localRecord?.withdrawNo }}
        </div>
      </div>

      <a-divider style="margin: 16px 0" />

      <div class="detail-section">
        <h3 class="section-title">{{ $t('基本信息') }}</h3>
        <a-descriptions
          :column="2"
          size="large"
          bordered
          table-layout="fixed"
        >
          <a-descriptions-item :label="$t('运营商')">
            {{ localRecord?.partnerName }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('提现状态')">
            <a-tag
              :color="getStatusColor(localRecord?.withdrawStatus)"
              size="small"
            >
              {{ localRecord?.withdrawStatusName }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('提现金额(元)')">
            <span class="amount">
              {{ localRecord?.withdrawAmount ? '¥' + localRecord.withdrawAmount.toFixed(2) : '-' }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('实际到账(元)')">
            <span class="amount actual">
              {{ localRecord?.actualAmount ? '¥' + localRecord.actualAmount.toFixed(2) : '-' }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('手续费(元)')">
            <span class="amount fee">
              {{ localRecord?.withdrawAmount && localRecord?.actualAmount ? 
                '¥' + (localRecord.withdrawAmount - localRecord.actualAmount).toFixed(2) : '-' }}
            </span>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('手续费率(%)')">
            {{ localRecord?.feeRate ? localRecord.feeRate + '%' : '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('提现申请时间')">
            {{ localRecord?.createTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('更新时间')">
            {{ localRecord?.updateTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('备注')" :span="2">
            {{ localRecord?.remark || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <div class="detail-section">
        <h3 class="section-title">{{ $t('收款信息') }}</h3>
        <a-descriptions
          :column="2"
          size="large"
          bordered
          table-layout="fixed"
        >
          <a-descriptions-item :label="$t('打款方式')">
            <a-tag size="small">
              {{ getPaymentMethodName(localRecord?.paymentMethod) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('收款人姓名')">
            {{ localRecord?.paymentName || '-' }}
          </a-descriptions-item>

          <!-- 银行转账信息 -->
          <template v-if="localRecord?.paymentMethod === PaymentMethod.BANK">
            <a-descriptions-item :label="$t('银行名称')">
              {{ localRecord?.bankName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item :label="$t('银行账号')">
              {{ localRecord?.bankAccount || '-' }}
            </a-descriptions-item>
            <a-descriptions-item :label="$t('开户支行')">
              {{ localRecord?.bankBranch || '-' }}
            </a-descriptions-item>
          </template>

          <!-- 支付宝信息 -->
          <template v-if="localRecord?.paymentMethod === PaymentMethod.ALIPAY">
            <a-descriptions-item :label="$t('支付宝账号')">
              {{ localRecord?.alipayAccount || '-' }}
            </a-descriptions-item>
          </template>

          <!-- 微信信息 -->
          <template v-if="localRecord?.paymentMethod === PaymentMethod.WECHAT">
            <a-descriptions-item :label="$t('微信账号')">
              {{ localRecord?.wechatAccount || '-' }}
            </a-descriptions-item>
          </template>
        </a-descriptions>
      </div>

      <!-- 审核信息 -->
      <div 
        v-if="localRecord?.withdrawStatus === WithdrawStatus.APPROVED || localRecord?.withdrawStatus === WithdrawStatus.REJECTED" 
        class="detail-section"
      >
        <h3 class="section-title">{{ $t('审核信息') }}</h3>
        <a-descriptions
          :column="2"
          size="large"
          bordered
          table-layout="fixed"
        >
          <a-descriptions-item :label="$t('审核结果')">
            <a-tag :color="localRecord?.withdrawStatus === WithdrawStatus.APPROVED ? 'green' : 'red'" size="small">
              {{ localRecord?.withdrawStatus === WithdrawStatus.APPROVED ? '通过' : '拒绝' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('审核时间')">
            {{ localRecord?.reviewTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('审核人')">
            {{ localRecord?.reviewer || '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('审核备注')" :span="2">
            {{ localRecord?.reviewRemark || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 打款信息 -->
      <div class="detail-section">
        <h3 class="section-title">{{ $t('打款信息') }}</h3>
        <a-descriptions
          :column="2"
          size="large"
          bordered
          table-layout="fixed"
        >
          <a-descriptions-item :label="$t('打款凭证')" :span="2">
            <div v-if="localRecord?.paymentVoucher" class="voucher-container">
              <img 
                :src="localRecord.paymentVoucher" 
                class="voucher-image" 
                @click="previewImage(localRecord.paymentVoucher)"
              />
            </div>
            <span v-else>-</span>
          </a-descriptions-item>
          <a-descriptions-item :label="$t('打款时间')">
            {{ localRecord?.paymentTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('打款操作人')">
            {{ localRecord?.paymentOperator || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <!-- 完成信息 -->
      <div v-if="localRecord?.withdrawStatus === WithdrawStatus.COMPLETED" class="detail-section">
        <h3 class="section-title">{{ $t('完成信息') }}</h3>
        <a-descriptions
          :column="2"
          size="large"
          bordered
          table-layout="fixed"
        >
          <a-descriptions-item :label="$t('完成时间')">
            {{ localRecord?.completeTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item :label="$t('完成操作人')">
            {{ localRecord?.completeOperator || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    
    <!-- 图片预览 -->
    <a-image-preview
      :visible="imagePreviewVisible"
      :src="previewSrc"
      :default-scale="1.2"
      @update:visible="(val: boolean) => imagePreviewVisible = val"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, PropType, watch } from 'vue';
import { 
  WithdrawStatus,
  PaymentMethod,
  PartnerWithdrawVO,
  getPartnerWithdrawDetail
} from '@/api/partner/withdraw';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object as PropType<PartnerWithdrawVO | null>,
    default: null
  }
});

const emit = defineEmits(['update:visible']);

// 当前展示的记录
const localRecord = ref<PartnerWithdrawVO | null>(null);

// 图片预览
const imagePreviewVisible = ref(false);
const previewSrc = ref('');

// 监听记录变化，获取详情
watch(
  () => props.record,
  async (val) => {
    if (val && val.id) {
      try {
        const res = await getPartnerWithdrawDetail(val.id);
        localRecord.value = res.data;
      } catch (error) {
        console.error('获取提现记录详情失败:', error);
        localRecord.value = val; // 如果获取详情失败，至少显示传入的记录
      }
    } else {
      localRecord.value = null;
    }
  },
  { immediate: true }
);

// 获取状态颜色
function getStatusColor(status: number | undefined) {
  if (status === undefined) return '';
  
  switch (status) {
    case WithdrawStatus.APPLYING:
      return 'blue';       // 申请中
    case WithdrawStatus.APPROVED:
      return 'orange';     // 审核通过
    case WithdrawStatus.PAID:
      return 'cyan';       // 已打款
    case WithdrawStatus.COMPLETED:
      return 'green';      // 已完成
    case WithdrawStatus.REJECTED:
      return 'red';        // 已拒绝
    default:
      return 'gray';
  }
}

// 获取支付方式名称
function getPaymentMethodName(method: number | undefined) {
  if (method === undefined) return '';
  
  switch (method) {
    case PaymentMethod.BANK:
      return '银行转账';
    case PaymentMethod.ALIPAY:
      return '支付宝';
    case PaymentMethod.WECHAT:
      return '微信';
    default:
      return '未知';
  }
}

// 预览图片
function previewImage(src: string) {
  previewSrc.value = src;
  imagePreviewVisible.value = true;
}

// 关闭对话框
function close() {
  emit('update:visible', false);
  // 清空记录
  localRecord.value = null;
}
</script>

<style scoped lang="less">
.withdraw-detail {
  padding: 0 10px;
  
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .status-tag {
      :deep(.arco-tag) {
        padding: 0 12px;
        font-size: 14px;
      }
    }
    
    .withdraw-no {
      font-size: 16px;
      color: #1D2129;
      font-weight: 500;
    }
  }
  
  .detail-section {
    margin-bottom: 24px;
    
    .section-title {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 500;
      color: #1D2129;
    }
  }
  
  :deep(.arco-descriptions-item-label) {
    width: 120px;
    background-color: #f9f9f9;
  }
  
  .amount {
    font-weight: bold;
    color: #165DFF;
    
    &.actual {
      color: #FF5722;
    }
    
    &.fee {
      color: #FF7D00;
    }
  }
  
  .voucher-container {
    width: 100%;
    text-align: center;
    
    .voucher-image {
      max-width: 200px;
      max-height: 150px;
      cursor: pointer;
      border: 1px solid #e9e9e9;
      padding: 5px;
      transition: all 0.3s;
      
      &:hover {
        border-color: #165DFF;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
    }
  }
}
</style> 